import 'package:flutter/material.dart';
import 'package:flutter_echarts/flutter_echarts.dart';
import 'package:getwidget/getwidget.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

class EvaluateStatistics extends StatefulWidget {
  const EvaluateStatistics({Key? key}) : super(key: key);

  @override
  State<EvaluateStatistics> createState() => _EvaluateStatisticsState();
}

class _EvaluateStatisticsState extends State<EvaluateStatistics> {
  String options = '''
  {
  color: ['#F8D734', '#FE6C6C'],
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'right',
    bottom: 'bottom'
  },
  series: [
    {
      name: '评价统计',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      labelLine: {
        length: 5
      },
      label: {
        formatter: '{per|{d}%}',
        rich: {
          per: {
            color: '#515151',
            fontSize: 15,
            fontWeight: 400,
            fontFamily: '微软雅黑, sans-serif',
            padding: [3, 4],
            borderRadius: 4
          }
        }
      },
      data: [
        { value: 2887, name: '中差评 - 2887' },
        { value: 3851, name: '好评 - 3851' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}
  ''';

  List<_ShopRank> ranks = [];

  List<_ShopPoor> poors = [];

  int total = 0;

  @override
  void initState() {
    super.initState();
    ranks.add(_ShopRank(name: '超级豪华披萨', num: 292887, ratio: 0.9));
    ranks.add(_ShopRank(name: '超级豪华披萨', num: 291807, ratio: 0.85));
    ranks.add(_ShopRank(name: '超级豪华披萨', num: 202080, ratio: 0.8));
    ranks.add(_ShopRank(name: '超级豪华披萨', num: 162887, ratio: 0.75));
    ranks.add(_ShopRank(name: '超级豪华披萨', num: 102887, ratio: 0.6));
    ranks.add(_ShopRank(name: '超级豪华披萨', num: 92887, ratio: 0.55));
    ranks.add(_ShopRank(name: '超级豪华披萨', num: 22807, ratio: 0.5));
    ranks.add(_ShopRank(name: '超级豪华披萨', num: 2880, ratio: 0.4));
    for (var e in ranks) {
      total += e.num;
    }
    for (var i = 0; i < 6; i++) {
      poors.add(_ShopPoor(
          url:
              'https://img1.baidu.com/it/u=3033226715,2238019049&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          name: '中式老干妈大披萨'));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ToolsUtils.getDefaultBackgroundColor(),
      appBar: ToolsUtils.getDefaultBrnAppBar('评价统计'),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.only(top: Sizes.default20),
              padding: const EdgeInsets.symmetric(vertical: Sizes.default20),
              decoration: const BoxDecoration(
                color: Colors.white,
              ),
              alignment: Alignment.centerLeft,
              child: ListBody(
                children: [
                  Container(
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.only(left: Sizes.default20),
                    child: Text.rich(TextSpan(
                        text: '店铺中差评统计',
                        style: StylesUtils.customTextStyle(color: ColorsUtils.color363),
                        children: [
                          TextSpan(
                              text: '(近90天)', style: StylesUtils.customTextStyle(color: '#A1A1A1'))
                        ])),
                  ),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
                    height: 250,
                    alignment: Alignment.center,
                    child: Echarts(
                      option: options,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: Sizes.default20),
              padding: const EdgeInsets.symmetric(vertical: Sizes.default20),
              decoration: const BoxDecoration(
                color: Colors.white,
              ),
              alignment: Alignment.centerLeft,
              child: ListBody(
                children: [
                  Container(
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.only(left: Sizes.default20, bottom: Sizes.default20),
                    child: Text.rich(TextSpan(
                        text: '商品推荐榜',
                        style: StylesUtils.customTextStyle(color: ColorsUtils.color363),
                        children: [
                          TextSpan(
                              text: '(近90天)', style: StylesUtils.customTextStyle(color: '#A1A1A1'))
                        ])),
                  ),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: Sizes.default20),
                    child: Column(
                      children: ranks
                          .map((e) => Container(
                                margin: const EdgeInsets.only(bottom: Sizes.default20),
                                child: SizedBox(
                                  width: double.maxFinite,
                                  height: Sizes.default30,
                                  child: customPaint(e),
                                ),
                              ))
                          .toList(),
                    ),
                  ),
                ],
              ),
            ),
            Container(
                margin: const EdgeInsets.only(top: Sizes.default20),
                padding: const EdgeInsets.symmetric(vertical: Sizes.default20),
                decoration: const BoxDecoration(
                  color: Colors.white,
                ),
                alignment: Alignment.centerLeft,
                child: ListBody(
                  children: [
                    Container(
                      alignment: Alignment.centerLeft,
                      padding:
                          const EdgeInsets.only(left: Sizes.default20, bottom: Sizes.default20),
                      child: Text.rich(TextSpan(
                          text: '商品点差榜',
                          style: StylesUtils.customTextStyle(color: ColorsUtils.color363),
                          children: [
                            TextSpan(
                                text: '(近90天)',
                                style: StylesUtils.customTextStyle(color: '#A1A1A1'))
                          ])),
                    ),
                    GridView(
                      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3,
                          crossAxisSpacing: Sizes.default10,
                          mainAxisSpacing: Sizes.default20,
                          childAspectRatio: 1.28),
                      physics: const NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      children: poors.map((e) => img(e)).toList(),
                    ),
                  ],
                ))
          ],
        ),
      ),
    );
  }

  Widget img(_ShopPoor e) {
    return SizedBox(
      height: 80,
      child: Column(
        children: [
          Center(
            child: GFImageOverlay(
              height: Sizes.default60,
              width: Sizes.default60,
              borderRadius: BorderRadius.circular(Sizes.default5),
              image: NetworkImage(e.url),
            ),
          ),
          Expanded(
              child: Align(
            alignment: Alignment.bottomCenter,
            child: Text(
              e.name,
              style: StylesUtils.customTextStyle(
                  color: ColorsUtils.color333, fontSize: Sizes.default13),
              overflow: TextOverflow.ellipsis,
              maxLines: 1,
            ),
          ))
        ],
      ),
    );
  }

  Widget customPaint(_ShopRank e) {
    return CustomPaint(
        painter: _MyCustomPainter(total: total, num: e.num, ratio: e.ratio),
        child: Container(
          padding: const EdgeInsets.only(left: Sizes.default10),
          alignment: Alignment.centerLeft,
          child: Text(
            '${e.name} ${e.num}',
            style: StylesUtils.customTextStyle(fontSize: Sizes.default13),
          ),
        ));
  }
}

class _ShopRank {
  String name;

  int num;

  double ratio;

  _ShopRank({required this.name, required this.num, required this.ratio});
}

class _MyCustomPainter extends CustomPainter {
  final int total;

  final int num;

  final double ratio;

  _MyCustomPainter({required this.total, required this.num, required this.ratio});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = ColorsUtils.rgba(82, 190, 237, 1)
      ..style = PaintingStyle.fill;
    RRect rect = RRect.fromLTRBR(
        0, 0, size.width * ratio, size.height, const Radius.circular(Sizes.default3));
    canvas.drawRRect(rect, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

class _ShopPoor {
  String url;

  String name;

  _ShopPoor({required this.url, required this.name});
}
